<template>
  <view class="container">
    <view style="height: 24rpx;"></view>
    <view :style="'height:'+statusBarHeight+'px;'">
    </view>
    <view class="container-top ">
      <view class="inviteTenders">
        <image @click="toTenderingBidding" class="inviteTenders" src="/static/images/inviteTenders.png" mode=""> </image>
      </view>

      <view class="typeBox">
        <view v-for="(item,index) in typeList" :key="index" @click="onType(item,index)" class="typeBox-part">
          <image v-if="item.isSelect" class="icon" src="/static/images/select.png" mode=""></image>
          <text :class="{'active-lable':item.isSelect}" class="lable">{{item.lable}}</text>

        </view>
      </view>
      <image class="search" src="/static/images/search.png" mode="" @click.stop="goSearch()"></image>
    </view>
    <scroll-view class="instrumentBox" scroll-x="true" v-if="!attention">
      <view class="instrumentType">
        <view @click="onInstrumentType(item,index)" v-for="(item,index) in instrumentTypeList" :key="index" :class="{'active':item.isSelect}" class="instrumentType-part">
          {{item.title}}
        </view>
      </view>

    </scroll-view>
    <!-- <view class="instrumentTabs" v-show="attention"></view> -->
    <view class="instrumentTabs" v-show="attention">
      <view v-for="(item,index) in list" :key="index" class="instrumentTabs-box" @click.stop="change(index)">
        <view :class="current==index?'active-box':''">{{item.name}}</view>
        <view :class="current==index?'active-line':''">
          <view class="line-box"> </view>
        </view>
      </view>

      <!-- <u-tabs v-show="showThat" :list="list" item-width="112rpx" bar-width="18" :bar-style="{'background-color':'#FF2544'}" bar-height="6" active-color="#333333" inactive-color="#999999" bg-color="#F5F5F5" :is-scroll="false" :current="current" @change="change"></u-tabs> -->

    </view>

    <view class="content-box" v-if="showcontent==true">
      <!--二手乐器-->
      <instrument @initPage="initPage" v-if="query.types==2 && showcontent==true" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="instrument"></instrument>
      <!--交流圈-->
      <currentCircle @initPage="initPage" v-if="query.types==1 && showcontent==true" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="currentCircle"></currentCircle>
      <!--求货 代加工-->
      <requestGoods @initPage="initPage" v-if="query.types==3 && showcontent==true" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="requestGoods"></requestGoods>
      <requestGoods @initPage="initPage" v-if="query.types==4 && showcontent==true" :screenHeight="screenHeight" :excessHeight="excessHeight" :query="query" ref="requestGoods2"></requestGoods>

      <!--用户-->
      <!-- <user v-if="query.types==5" :screenHeight="screenHeight" :excessHeight="excessHeight" ref="user"></user> -->
    </view>
    <x-modal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </x-modal>
    <tabbar></tabbar>
  </view>
</template>

<script>

import {
  institution_vipTypeList, manufacturer_vipTypeList, normalTypeList,
  institution_vipyqList, manufacturer_vipyqList, normalyqList
} from '@/const/index.js';

import tabbar from '../../components/tabbar'
import instrument from '../componets/instrument/index'
import currentCircle from '../componets/currentCircle/index'
import requestGoods from '../componets/requestGoods/index'
// import user from '../componets/user/index'

import api from '@/api/index.js';
export default {
  components: {
    tabbar,
    instrument,
    currentCircle,
    requestGoods,
    // user
  },
  data() {
    return {
      triggered: true,
      screenHeight: '',
      excessHeight: 236,
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      instrumentTypeList: [],
      //头部
      typeList: [],
      //分类
      list: [],
      current: 0,
      // 必传参数 
      query: {
        typesName: '二手乐器',
        types: '2',//帖子类型:1=交流圈,2=二手乐器,3=求货,4=代加工 5=我的关注
        position: '1',//请求位置:1=首页,2=我的关注,3=搜索,4=他人主页,5=我的点赞,6=我的动态
        lable: ''//请求位置:1=首页必传
      },
      //attention 选中我的关注
      attention: false,
      showThat: false,
      temporarilyLable: '',
      showcontent: false,
      linshicurrent: '',
      temporarilytypes: '',
      contractObj: {
        title: '提示',
        content: '抱歉，您暂时没有权限查看此版块，请先开通招标投标会员',
        isShow: false,
        showBotton: true,
        cancelText: '取消',
        confirmText: '去开通',
        showOneBotton: false
      },
    }
  },
  onLoad() {
    uni.hideTabBar();
    this._freshing = false;
    setTimeout(() => {
      this.triggered = true;
    }, 1000);
    const result = uni.getSystemInfoSync();
    let safeAreaBottom = uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().safeArea.height;
    this.screenHeight = uni.getStorageSync('screenHeight') - safeAreaBottom - this.statusBarHeight;
    // this.getyqChildByName()
    let that = this
    that.showThat = false
    that.$nextTick(() => {
      //机构 求货 //制造商 求货代加工
      if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.typeList = normalTypeList
        that.list = normalyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
        that.typeList = institution_vipTypeList
        that.list = institution_vipyqList
      } else if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.typeList = manufacturer_vipTypeList
        that.list = manufacturer_vipyqList
      } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
        //拥有所有权限
        that.typeList = manufacturer_vipTypeList
        that.list = manufacturer_vipyqList
      }
      // that.showThat = true
    })
    if (this.query.position != '2') {
      this.initPage()
    }
  },
  onShow() {
    //获取用户信息
    this.getMyInfo();
    uni.$on("isSeach", (data) => {
      console.log('ddddddddd')
      if (data.isSeachFlag == true) {
        this.$nextTick(() => {
          if (this.query.types != 2) {
            this.showcontent = false
            this.newSearch()
          }

          // this.showcontent = false
          // this.newSearch()

        })
      }
    });
  },
  onUnload() {
    uni.$off("isSeach");
  },
  methods: {
    getMyInfo() {
      let that = this
      api.base.getMyInfo().then((res) => {
        if (res.code == 1) {
          this.userinfo = res.data;
          uni.setStorageSync('userinfo', this.userinfo);
          that.$nextTick(() => {
            //机构 求货 //制造商 求货代加工
            if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
              that.typeList = normalTypeList
              that.list = normalyqList
            } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip != 1) {
              that.typeList = institution_vipTypeList
              that.list = institution_vipyqList
            } else if (uni.getStorageSync('userinfo').institution_vip != 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
              //拥有所有权限
              that.typeList = manufacturer_vipTypeList
              that.list = manufacturer_vipyqList
            } else if (uni.getStorageSync('userinfo').institution_vip == 1 && uni.getStorageSync('userinfo').manufacturer_vip == 1) {
              //拥有所有权限
              that.typeList = manufacturer_vipTypeList
              that.list = manufacturer_vipyqList
            }
            // that.showThat = true
          })


        } else {
          uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      });
    },
    initPage() {
      let that = this
      that.$nextTick(() => {
        if (this.query.position != '2') {
          this.getyqChildByName()
        } else {
          this.newSearch()
        }
      })
    },
    newSearch() {
      let that = this
      that.showcontent = true
      that.$nextTick(() => {
        let keyObj = ''
        if (that.query.types == 1) {
          keyObj = 'currentCircle'
        } else if (that.query.types == 2) {
          keyObj = 'instrument'
        } else if (that.query.types == 3) {
          keyObj = 'requestGoods'
        } else if (that.query.types == 4) {
          keyObj = 'requestGoods2'
        }
        console.log('请求')
        console.log(keyObj)
        console.log(that.$refs[keyObj])
        that.$refs[keyObj].init();
      })
    },
    toTenderingBidding() {
      if (uni.getStorageSync('userinfo').invite_vip == 1) {
        uni.navigateTo({
          url: '/pages/tenderingBidding/index'
        })
      } else {
        this.contractObj.isShow = true
      }
    },
    onType(item, index) {
      this.typeList.map(part => {
        part.isSelect = false;
      });
      item.isSelect = true;
      this.showThat = false
      this.showcontent = false

      if (item.value == 5) {
        //选的我的关注 显示tab切换
        this.$nextTick(() => {
          if (this.temporarilytypes != '') {
            this.query.types = this.temporarilytypes
          } else {
            this.query.types = '1'
          }

          this.query.position = '2'
          this.temporarilyLable = this.query.lable
          this.query.lable = ''
          if (this.linshicurrent != '') {
            this.current = this.linshicurrent
          }
          this.attention = true
          this.showThat = true
          this.newSearch()
        })
      } else {

        this.$nextTick(() => {

          this.linshicurrent = this.current
          this.query.typesName = item.lable
          this.query.lable = this.temporarilyLable
          this.attention = false
          this.query.types = item.value
          this.query.position = '1'
          this.getyqChildByName()
          // this.newSearch()
          // this.change(0)
        })
      }

    },
    onInstrumentType(item, index) {
      this.instrumentTypeList.map(part => {
        part.isSelect = false;
      });

      item.isSelect = true;
      this.query.lable = item.title
      this.temporarilyLable = item.title
      this.$nextTick(() => {
        this.newSearch()
      })
    },
    change(index) {
      if (this.query.position = '2') {
        this.current = index;
        this.query.types = this.list[index].value
        this.temporarilytypes = this.query.types
        this.$nextTick(() => {
          this.newSearch()
        })
      }

    },
    goSearch() {
      uni.navigateTo({
        url: `/pages/index/search`
      });
    },
    getyqChildByName() {
      this.instrumentTypeList = []
      console.log('getyqChildByName')
      console.log(this.query)
      api.base.getyqChildByName({ name: this.query.typesName }).then((res) => {
        if (res.code == 1) {
          this.instrumentTypeList = res.data;
          for (let i = 0; i < this.instrumentTypeList.length; i++) {
            if (i == 0) {
              this.instrumentTypeList[0].isSelect = true
              this.query.lable = this.instrumentTypeList[0].title
              this.temporarilyLable = this.query.lable
              this.temporarilyLable = this.instrumentTypeList[0].title
            } else {
              this.instrumentTypeList[i].isSelect = false
            }
          }

          this.newSearch()
        } else {
          uni.showToast({
            title: res.msg,
            icon: 'none'
          });
        }
      });
    },
    cancel() {
      this.contractObj.isShow = false
    },
    confirm() {
      this.contractObj.isShow = false
      uni.navigateTo({
        url: '/pages/my/vip/index'
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  &-top {
    width: 750rpx;
    height: 92rpx;
    background: #ffffff;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    border-bottom: 1rpx solid #e6e6e6;
    padding: 26rpx 32rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .inviteTenders {
      width: 48rpx;
      height: 48rpx;
      margin-right: 25rpx;
      flex-shrink: 0;
    }

    .typeBox {
      display: flex;
      align-items: center;
      justify-content: space-around;
      flex-shrink: 0;
      min-width: 554rpx;
      height: 88rpx;

      .lable {
        margin-right: 20rpx;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        flex-shrink: 0;
        flex-wrap: nowrap;
      }

      .active-lable {
        font-size: 28rpx;
      }

      .icon {
        width: 24rpx;
        height: 24rpx;
        margin-right: 14rpx;
      }
    }

    .search {
      width: 48rpx;
      height: 48rpx;
      flex-shrink: 0;
    }
  }

  .instrumentBox {
    min-width: 750rpx;
    white-space: nowrap;
    background: #ffffff;
    padding-left: 20rpx;
    padding-right: 8rpx;
  }

  .instrumentType {
    height: 88rpx;

    display: flex;
    align-items: center;

    &-part {
      height: 48rpx;
      padding: 0 24rpx;
      background: #f5f5f5;
      border-radius: 38rpx 38rpx 38rpx 38rpx;
      margin-left: 12rpx;
      display: inline-block;
      line-height: 48rpx;
      text-align: center;
    }

    .active {
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #ffffff;
      background: #6d0cf7;
    }
  }

  .instrumentTabs {
    height: 88rpx;
    width: 100vw;
    // width: 250rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    color: #333333;
    display: flex;

    v-deep.u-tab-item {
      color: #333333 !important;
    }
    .instrumentTabs-box {
      padding-top: 30rpx;
      flex: 1;
      text-align: center;
      font-size: 28rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #999999;
      line-height: 33rpx;
      // display: flex;
      // justify-content: center;
      // align-items: center;
    }
    .active-box {
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
    }

    .active-line {
      text-align: center;
      display: flex;
      justify-content: center;
      padding-top: 2px;
      .line-box {
        width: 18rpx;
        height: 6rpx;
        background: #ff2544;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        opacity: 1;
      }
    }
  }

  .content-box {
    margin-top: 32rpx;
  }
}

.box {
  height: 1100rpx;
}
</style>